<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>Agile Lite</title>
		<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
		<style>
		#aside_container aside{
			background: #333;
		}
		
		#section_container_mask{
			background-color:#000;
			opacity: .3;
		}
		
		/*侧滑列表-自定义宽度*/
		#custom_width_aside .menu li:active{
			background-color:rgba(255,255,255,0.2);
		}
		/*侧滑列表-白色列表*/
		#aside_container aside.aside-white{
			background: -webkit-linear-gradient(-45deg, #fff 0%,#fff 75%);
			color:#333;
			padding:30px 0;
		}
		#aside_container aside.aside-white .listitem li{
			border-bottom:0px;
			padding-left:40px;
		}
		/*侧滑列表-列表样式*/
		.side-list{
			padding:10px 20px;
			border-bottom:1px solid #ccc;
		}
		.side-list:active{
			background-color:rgba(255,255,255,0.2);
		}
		.side-list.active{
			background-color:rgba(255,255,255,0.2);
		}
		.side-list.active div{
			background-color:rgba(255,255,255,0.2);
		}
		.side-list a{			
			color: #fff;
		}
		.side-list-btn{
			font-size:14px;
			border:1px solid white;
			width:80%;
			padding:6px 0;
			text-align:center;
			position:relative;
			left:50%;
			-webkit-transform:translateX(-50%);
			margin-bottom:10px;
		}
		.side-list-btn:active{
			background-color:rgba(255,255,255,0.2)
		}
		
		.side-list-round{
			width:36px;
			height:36px;
			border-radius:18px;
			border:1px solid rgba(255,255,255,0.5);
			display:inline-block;
			text-align:center;
			font-size:20px;
			color:white;
			position:relative;
			vertical-align:middle;
			margin-right:4px;
		}
		.side-list-round img,.side-list-round .iconfont{
			position:absolute;top:50%;left:50%;display: block;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);width:20px;
		}
		.side-list-round + span{
			margin-left:6px;
			font-size:14px;
		}
		
		/*侧滑列表-九宫样式*/
		.grid .grid-cell .grid-img{
			background-color:transparent;
			background-size:cover;
			width:50px;
			height:50px;
		}
		
		.grid .grid-img-guide{
			background:url(../assets/app/img/aside/guide.png);
		}
		.grid .grid-cell:active .grid-img-guide{
			background:url(../assets/app/img/aside/guide_active.png);
		}
		
		.grid .grid-img-trash{
			background:url(../assets/app/img/aside/trash.png);
		}
		.grid .grid-cell:active .grid-img-trash{
			background:url(../assets/app/img/aside/trash_active.png);
		}
		
		.grid .grid-img-switch{
			background:url(../assets/app/img/aside/switch_off.png);
		}
		.grid .grid-img-switch.on{
			background:url(../assets/app/img/aside/switch_on.png);
			background-size:cover;
		}
		.grid .grid-img-switch.on+.grid-label{
			color:white;
		}
		
		.grid .grid-img-feedback{
			background:url(../assets/app/img/aside/feedback.png);
		}
		.grid .grid-cell:active .grid-img-feedback{
			background:url(../assets/app/img/aside/feedback_active.png);
		}
		
		.grid .grid-img-about{
			background:url(../assets/app/img/aside/about.png);
		}
		.grid .grid-cell:active .grid-img-about{
			background:url(../assets/app/img/aside/about_active.png);
		}
		
		.grid .grid-img-weibo{
			background:url(../assets/app/img/aside/weibo.png);
		}
		.grid .grid-cell:active .grid-img-weibo{
			background:url(../assets/app/img/aside/weibo_active.png);
		}
		
		.grid .grid-cell{
			color:rgba(255,255,255,0.3);
		}
		.grid .grid-cell:active{
			color:rgba(255,255,255,1);
		}
		.grid .grid-cell:active .grid-img{
			background-color:transparent;
			background-size:cover;
		}
		</style>
	</head>
	<body>
		<div id="aside_container">
			<aside id="left_push_aside" data-position="left" data-transition="push">
				<div class="padded">
			   		左侧菜单<br>push效果为两块区域一起动
			   	</div>
			</aside>
			<aside id="left_overlay_aside" data-position="left" data-transition="overlay">
				<div class="padded">
					左侧菜单<br>overlay效果为只有aside部分动
				</div>
			</aside>
			
			<aside id="right_push_aside" data-position="right" data-transition="push">
				<div>
					<ul class="menu">
				        <li class="side-list"><a href="#" onclick="$native.toast('离线版暂不支持此功能')"><div class="side-list-round"><img src="../assets/app/img/aside/notice.png" class="wmz-side-img"/></div><span>公告收藏</span></a></li>
				        <li class="side-list"><a href="#" onclick="$native.toast('离线版暂不支持此功能')"><div class="side-list-round"><img src="../assets/app/img/aside/doc.png" class="wmz-side-img"/></div><span>公文收藏</span></a></li>
				        <li class="side-list"><a href="#" onclick="$native.toast('离线版暂不支持此功能')"><div class="side-list-round"><img src="../assets/app/img/aside/contact.png" class="wmz-side-img"/></div><span>通讯录收藏</span></a></li>
				    </ul>
			    </div>
			</aside>
			<aside id="right_overlay_aside" data-position="right" data-transition="overlay">
				<div>
					<ul class="grid size54" data-rowspace="8" data-col="3" style="margin:10px 0px;">
						<li>
							<a class="photo color-white" style="background-color:#e55f5f;" data-share="tsina">
								<i class="icon icon-tsina"></i>
							</a>
							<label class="grid-label">新浪微博</label>
						</li>
						<li>
							<a class="photo color-white" style="background-color:#eda200;" data-share="qzone">
								<i class="icon icon-qqzone"></i>
							</a>
							<label class="grid-label">QQ空间</label>
						</li>
						<li>
							<a class="photo color-white" style="background-color:#45aaf2;" data-share="tqq">
								<i class="icon icon-tqq"></i>
							</a>
							<label class="grid-label">QQ微博</label>
						</li>
						<li>
							<a class="photo color-white" style="background-color:#4485fb;" data-share="qq">
								<i class="icon icon-qq"></i>
							</a>
							<label class="grid-label">QQ好友</label>
						</li>
						<li>
							<a class="photo color-white" style="background-color:#38ba35;" data-share="weixin">
								<i class="icon icon-weixin"></i>
							</a>
							<label class="grid-label">微信</label>
						</li>
						<li>
							<a class="photo color-white" style="background-color:#41ce29;" data-share="fweixin">
								<i class="icon icon-fweixin"></i>
							</a>
							<label class="grid-label">微信朋友圈</label>
						</li>
					</ul>
				</div>
			</aside>
			<aside id="right_reveal_aside" data-position="right" data-transition="reveal">
				<div class="padded">
				右侧菜单<br>reveal效果为只有section部分动
			</aside>
			<aside id="custom_width_aside" data-position="right" data-transition="push" style="width:80px;">
				<div class="padded">
					<ul class="menu" style="text-align:center;font-size:2em;">
			            <li style="padding: 10px 0;">
			                <a><i class="icon icon-apple white" style="font-size:30px;"></i></a>
			            </li>
			            <li style="padding: 10px 0;">
			                <a><i class="icon icon-android white" style="font-size:30px;"></i></a>
			            </li>
			            <li style="padding: 10px 0;">
			                <a><i class="icon icon-qq white" style="font-size:30px;"></i></a>
			            </li>
			            <li style="padding: 10px 0;">
				            <a><i class="icon icon-tsina white" style="font-size:30px;"></i></a>
				        </li>
			        </ul>
		        </div>
			</aside>
		</div>
		<div id="section_container">
			<section id="aside_section" data-role="section" class="active" data-aside-left="#left_push_aside" data-aside-right="#right_push_aside">
				<header>
		            <div class="titlebar">
		            	<a class="left" data-toggle="back" href="#">
		                    <i class="icon icon-arrowleft"></i>
		                </a>
		                <h1 class="text-center">侧边栏</h1>
		            </div>
		        </header>
				<article  data-role="article" id="aside_article" class="active" style="top:44px;bottom:0px;">
					<div class="scroller">
						<div style="padding:8px;">
							<div class="section-title">左侧菜单栏:右滑可以唤起</div>
			                <a class="button bg-turquoise white" href="#left_push_aside" data-toggle="aside">push</a>
			                <a class="button bg-peter-river white" href="#left_overlay_aside" data-toggle="aside">overlay</a>
				            <div class="section-title">右侧菜单栏:左滑可以唤起</div>
			                <a class="button bg-turquoise" href="#right_push_aside" data-toggle="aside">push</a>
			                <a class="button bg-peter-river" href="#right_overlay_aside" data-toggle="aside">overlay</a>
			                <a class="button bg-alizarin" href="#right_reveal_aside" data-toggle="aside">reveal</a>
			                <a class="button bg-orange" href="#custom_width_aside" data-toggle="aside">自定义宽度</a>
						</div>
					</div>
				</article>
			</section>
		</div>

		
		<!--- third -->
		<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<!---  agile -->
		<script type="text/javascript" src="../assets/agile/js/agile.js"></script>
<script type="text/javascript" src="../assets/bridge/exmobi.js"></script>
<script type="text/javascript" src="../assets/bridge/agile.exmobi.js"></script>			
		<!-- app -->
		<script type="text/javascript" src="../assets/app/js/app.seedsui.js"></script>
	</body>
</html>